<template>
  <div>
    {{ articleList.length }}
  </div>
</template>

<script>
export default {
  name: 'AxiosTest',
  data () {
    return {
      articleList: []
    }
  },
  created () {
    this.getArticleList()
  },
  methods: {
    // 第一种写法
    getArticleList () {
      this.$axios({
        method: 'get',
        url: 'https://applet-base-api-t.itheima.net/articles',
        params: {
          _page: 1,
          _limit: 10
        }
      }).then((res) => {
        debugger
        console.log(res.data)
        this.articleList = res.data
      })
    },
    //   第二种写法
    getArticleList1 () {
      this.$axios.get('https://applet-base-api-t.itheima.net/articles', {
        params: {
          _page: 1,
          _limit: 10
        }
      }).then((res) => {
        console.log(res.data)
      })
    },
    //   post请求
    getArticleList2 () {
      this.$axios({
        method: 'post',
        url: 'https://applet-base-api-t.itheima.net/articles',
        data: {
          _page: 1,
          _limit: 10
        }
      }).then((res) => {
        console.log(res.data)
      })
    },
    // 使用post别名
    getArticleList3 () {
      this.$axios.post('https://applet-base-api-t.itheima.net/articles', {
        _page: 1,
        _limit: 10
      }).then((res) => {
        console.log(res.data)
      })
    }
  }
}
</script>

<style scoped>

</style>
